<!DOCTYPE html>
<html>

<head>
    <title>{$user_nickname} - 修改头像</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <include file="public@head" />
</head>

<body class="body-white" id="top">
    <include file="public@nav" />
    <include file="public@usernav" />
    <div class="container py-3">
        <h6 class="text-right"><i class="fa fa-list-alt"></i> 修改头像</h6>
        <hr>
        <div class="">
            <div class="text-center">
                <if condition="empty($avatar)">
                    <img src="/assets/dist/images/headicon_128.png" class="headicon" width="128" />
                    <else/>
                    <img src="{:cmf_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" width="128" />
                </if>
            </div>
            <div class="custom-file my-2">
                <input type="file" class="custom-file-input" onchange="avatar_upload(this)" id="avatar_uploder" name="file">
                <label class="custom-file-label" for="customFile">选择头像图片</label>
            </div>
            <div class="uploaded_avatar_area my-2">
                <div class="uploaded_avatar_btns">
                    <button class="btn btn-primary confirm_avatar_btn" onclick="update_avatar()">确定</button>
                    <a class="btn btn-light" onclick="reloadPage()">取消</a>
                </div>
            </div>
            <p class="help-block">头像支持jpg,png,jpeg格式,文件大小最大不能超过1M</p>
        </div>
    </div>
    <!-- /container -->
    <include file="public@footer" />
    <include file="public@scripts" />
    <script type="text/javascript">
    function update_avatar() {
        var area = $(".uploaded_avatar_area img").data("area");
        $.post("{:url('Profile/avatarUpdate')}", area, function(data) {
            if (data.code == 1) {
                reloadPage(window);
            }

        }, "json");
    }

    function avatar_upload(obj) {
        var $fileinput = $(obj);
        /* $(obj)
         .show()
         .ajaxComplete(function(){
         $(this).hide();
         }); */
        Wind.css("jcrop");
        Wind.use("ajaxfileupload", "jcrop", "noty", function() {
            $.ajaxFileUpload({
                url: "{:url('Profile/avatarUpload')}",
                secureuri: false,
                fileElementId: "avatar_uploder",
                dataType: 'json',
                data: {},
                success: function(data, status) {

                    if (data.code == 1) {
                        $("#avatar_uploder").hide();
                        var $uploaded_area = $(".uploaded_avatar_area");
                        $uploaded_area.find("img").remove();
                        var src = "__ROOT__/upload/" + data.data.file;
                        var $img = $("<img style='max-width:100%'/>").attr("src", src);
                        $img.prependTo($uploaded_area);
                        $(".uploaded_avatar_btns").show();
                        var img = new Image();
                        img.src = src;

                        var callback = function() {
                            console.log(img.width);
                            $img.Jcrop({
                                aspectRatio: 1,
                                trueSize: [img.width, img.height],
                                setSelect: [0, 0, 100, 100],
                                onSelect: function(c) {
                                    $img.data("area", c);
                                }
                            });
                        }

                        if (img.complete) {
                            callback();
                        } else {
                            img.onload = callback;
                        }

                    } else {
                        noty({
                            text: data.msg,
                            type: 'error',
                            layout: 'center',
                            callback: {
                                afterClose: function() {
                                    reloadPage(window);
                                }
                            }
                        });
                    }

                },
                error: function(data, status, e) {}
            });
        });

        return false;
    }
    </script>
</body>

</html>